<template>
  <a-spin :spinning="exportLoading">
    <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
    <a-button type="primary" @click="exportExcel" :loading="exportLoading" v-modulePerm="['cloudWare:export']">缺货数据导出</a-button>
    <common-table
        :columns="columns"
        :dataSource="dataList"
        v-model:localPagination="page"
        @paginationChange="onPageChange"
        v-model:loading="loading"
        :rowKey="(record) => record.productSku"
        :scroll="{ x: 'max-content'}"
        :slots="['expandedRowRender']"
        @expand="handleExpandedRowsChange"
    >
      <template #expandedRowRender="{ record }">
        <expand-cloud :ref="`expandCloud-${record.productSku}`" :productSku="record.productSku" />
      </template>
    </common-table>
    <span>
    备注：云仓缺货订单处理流程见<a href="https://alidocs.dingtalk.com/i/nodes/YMyQA2dXW79r3wPPuAqvzeAvJzlwrZgb" target="_blank">文档</a>
  </span>
  </a-spin>
</template>
<script>
export default {
  name:'inventoryPools-cloudWarehouses'
}
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {nextTick, ref,getCurrentInstance} from "vue";
import ExpandCloud from "@/views/inventoryPools/components/expandCloud.vue";
import {getLackInventory} from "@/api/inventoryPools/cloudWarehouses.js";
import {postFile} from "@utils/service/index.js";
import {message} from "ant-design-vue";
const dataLists = [
  {
    supplierCode: '1',
    supplierName: '供应商名称1',
    productSku: '平台SKU1',
    qtyPurchase: 100,
    qtySellable: 50,
    qtyNostock: 50
  },
  {
    supplierCode: '2',
    supplierName: '供应商名称1',
    productSku: '平台SKU2',
    qtyPurchase: 100,
    qtySellable: 50,
    qtyNostock: 50
  },
  {
    supplierCode: '3',
    supplierName: '供应商名称1',
    productSku: '平台SKU3',
    qtyPurchase: 100,
    qtySellable: 50,
    qtyNostock: 50
  },
  {
    supplierCode: '4',
    supplierName: '供应商名称1',
    productSku: '平台SKU4',
    qtyPurchase: 100,
    qtySellable: 50,
    qtyNostock: 50
  },
]
const columns = [
  {
    title: "供应商编码",
    dataIndex: "supplierCode",
    key: "supplierCode",
    align: 'center'
  },
  {
    title: "供应商名称",
    dataIndex: "supplierName",
    key: "supplierName",
    align: 'center'
  },
  {
    title: '平台SKU',
    dataIndex: 'productSku',
    key: 'productSku',
    align: 'center'
  },
  {
    title: '采购在途',
    dataIndex: 'qtyPurchase',
    key: 'qtyPurchase',
    align: 'center'
  },
  {
    title: '可售',
    dataIndex: 'qtySellable',
    key: 'qtySellable',
    align: 'center'
  },
  {
    title: '缺货',
    dataIndex: 'qtyNostock',
    key: 'qtyNostock',
    align: 'center'
  }
];
const { proxy } = getCurrentInstance();
const formItems = ref([
  {
    label: '供应商编码',
    field: 'supplierCode',
    type: 'input',
  },
  {
    label: '平台SKU',
    field: 'productSku',
    type: 'input',
  }
]);
const exportLoading = ref(false);
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getLackInventory,
  queryFactory: () => ({
    columns:'createTime'
  })
});
/**
 * 展开行
 * @param flag
 * @param record
 */
const handleExpandedRowsChange = (flag,record) => {
  if(flag){
    nextTick(()=>{
      proxy.$refs[`expandCloud-${record.productSku}`].init()
    })
  }
}
/**
 * 导出excel
 */
const exportExcel = async () => {
  try{
    let obj = query.value
    exportLoading.value = true;
    const res = await postFile('/cloud/exportLackInventory','get',obj,"云仓库存.xlsx")
    message.success('导出成功！')
  }catch (e){
    message.error(e);
  }finally {
    exportLoading.value = false;
  }
}
</script>
<style scoped>
:deep(.el-table) {
  --el-table-row-hover-bg-color: #00a5ed;
}
</style>
